<template>
    <div class="container mt-2">
        <h3>个人中心</h3>
        <hr>
        <div class="media">
            <img @click="() => router.push({ name: 'avatar' })" @error="errorHandler" :src="host + loginInfo?.avatar"
                class="avatar media-middle img-thumbnail rounded-circle" alt="">
            <div class="media-body ml-4">
                <h5 id="user">{{ loginInfo?.user?.username }}</h5>
                <p>综合积分:{{ loginInfo.points }}</p>
                <p>
                    <span class="mr-2">{{ loginInfo?.user?.email }}</span>
                    <span>{{ loginInfo?.phone }}</span>
                </p>
                <p>
                    <button @click="logout" class="btn btn-outline-primary btn-sm" href="#">安全退出</button>
                </p>
            </div>
        </div>
        <hr>
        <el-tabs v-model="activeName" class="demo-tabs">
            <el-tab-pane label="我的提问" name="first">
                <el-table style="margin:20px 0;" :data="queList" stripe>
                    <el-table-column label="分类" prop="cate.name" min-width="80"></el-table-column>
                    <el-table-column label="问题" prop="title" min-width="100"></el-table-column>
                    <el-table-column label="状态" prop="status" min-width="100">
                        <template #default="attr">
                            <el-tag :type="attr.row.status ? 'success' : 'info'">{{ attr.row.status ? '已解答' : '未解答' }}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="作者" prop="user.username" min-width="80"></el-table-column>
                    <el-table-column label="浏览次数" prop="visit" min-width="80"></el-table-column>
                    <el-table-column label="发布日期" prop="create_time" min-width="100">
                        <template #default="attr">
                            {{ new Date(attr.row.create_time).toLocaleString() }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="100">
                        <template #default="attr">
                            <el-tooltip effect="light" content="编辑" placement="top-start">
                                <el-button type="success" plain round size="small" :icon="Edit"></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" placement="top-start" content="查看详情">
                                <el-button @click="$router.push({ name: 'question', params: { id: attr.row.id } })"
                                    type="primary" plain round size="small" :icon="Right"></el-button>
                            </el-tooltip>

                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页按钮 -->
                <el-pagination v-if="queList.length > 0" :pageSize="pageSize" @current-change="pageUpdate" background
                    layout="prev, pager, next" :total="queTotal" />
            </el-tab-pane>
            <el-tab-pane label="我的回答" name="second">
                <el-table style="margin:20px 0;" :data="answerList" stripe>
                    <el-table-column label="问题" prop="que.title" min-width="100"></el-table-column>
                    <el-table-column label="解答" prop="answer" min-width="180">
                        <template #default="attr">
                            {{ stripTag(attr.row.answer) }}
                        </template>
                    </el-table-column>
                    <el-table-column label="阅读次数" prop="visit" min-width="100">
                         <template #default="props">
                            <el-tag type="success">{{props.row.visit}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="推荐指数" prop="star" min-width="100">
                        <template #default="props">
                            <el-tag type="primary">{{props.row.star}}</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="发布日期" prop="create_time" min-width="100">
                        <template #default="attr">
                            {{ new Date(attr.row.create_time).toLocaleString() }}
                        </template>
                    </el-table-column>
                    <el-table-column label="更新日期" prop="update_time" min-width="100">
                        <template #default="attr">
                            {{ new Date(attr.row.update_time).toLocaleString() }}
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" min-width="100">
                        <template #default="attr">
                            <el-tooltip effect="light" content="编辑" placement="top-start">
                                <el-button type="success" plain round size="small" :icon="Edit"></el-button>
                            </el-tooltip>
                            <el-tooltip effect="light" placement="top-start" content="查看详情">
                                <el-button @click="$router.push({ name: 'answer', params: { id: attr.row.uuid } })"
                                    type="primary" plain round size="small" :icon="Right"></el-button>
                            </el-tooltip>

                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup>
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import { onMounted, ref } from 'vue'
import http from '@/utils/http'
import avatar from '@/assets/imgs/no-avatar.png'
import { Edit, Right } from '@element-plus/icons-vue'
const router = useRouter()
const activeName = ref('second')
const loginInfo = ref({})
const queList = ref([])
const queTotal = ref(0)
const answerList = ref([])
// const answerTotal = ref(0)
let pageNum = 1
let pageSize = 10
const stripTag = html => String(html).replace(/<[^>]*>/g, '').slice(0, 30)
const queryQuestions = async () => {
    const params = { page: pageNum }
    const res = await http.get('/api/questions/mine/', { params })
    if (res.status === 200) {
        queList.value = res.data.results
        queTotal.value = res.data.count
    }
}
// 查询当前账号发布的解答数据
const queryAnswers = async () => {
    const { status, data } = await http.get('/api/answer/mine/')
    if (status === 200) {
        answerList.value = data
        console.log(answerList.value, 'answerList');
    }
    console.log(data, status);

}
const pageUpdate = async (page) => {
    // 更新页码
    pageNum = page
    await queryQuestions()
}
onMounted(async () => {
    const loginData = localStorage.getItem('loginInfo')
    if (!loginData) {
        const res = await http.post('/api/userinfo/login_info/')
        if (res.status === 200) {
            loginInfo.value = res.data
            localStorage.setItem('loginInfo', JSON.stringify(res.data))
        }
        return false
    }
    loginInfo.value = JSON.parse(loginData || '{}')
    // 获取当前账号发布的提问数据
    await queryQuestions()
    // 获取当前账号发布的解答数据
    await queryAnswers()
})
const logout = () => {
    ElMessageBox.confirm('确认退出?', '提示',).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('loginInfo')
        router.push('/login')
    }).catch(() => null)

}
const errorHandler = (event) => {
    event.target.src = avatar
}
</script>
